﻿@model Tarasca.Models.ReportesModel
@using BLLTarasca
@using BLLTarasca.Reportes
<script type="text/javascript">
    $(document).ready(function () {
        generarGrafico();
    });

    function generarGrafico() {
        var chart = new CanvasJS.Chart("graficoCategorias",
        {
            title: {
                text: "Gastos por Categorías"
            },
            legend: {
                maxWidth: 350,
                itemWidth: 120
            },
            data: [
            {
                type: "pie",
                showInLegend: true,
                legendText: "{indexLabel}",
                dataPoints: @Html.Raw(Model.ReporteJSON)
                //dataPoints: [
                //    { y: 4181563, indexLabel: "PlayStation 3" },
                //    { y: 2175498, indexLabel: "Wii" },
                //    { y: 3125844, indexLabel: "Xbox 360" },
                //    { y: 1176121, indexLabel: "Nintendo DS" },
                //    { y: 1727161, indexLabel: "PSP" },
                //    { y: 4303364, indexLabel: "Nintendo 3DS" },
                //    { y: 1717786, indexLabel: "PS Vita" }
                //]
            }
            ]
        });
        chart.render();
    }
    
</script>
<div class="row">
    <div class="col-lg-12">
        <div id="graficoCategorias">

        </div>
    </div>
</div>
<h1>Detalles</h1>
<div class="row">
    <div class="table-responsive grillaMovimientos col-lg-12">
        <table class="table table-striped table-hover">
            <tr>
                <th class="col-md-10">Categoría</th>
                <th class="col-md-2">Monto</th>
            </tr>
            @foreach (ReporteItemPorCategoria item in Model.Reporte.Items)
            {
                <tr>
                    <td class="col-md-10">@item.Categoria.Nombre</td>
                    <td class="col-md-2 columnaDinero"><label class="text-danger">@item.Monto.ToString("C2")</label></td>
                </tr>
            }
        </table>
    </div>
</div>